<!--登录页面-->
<script>

const app = getApp()
export default {
  name: "home",
  components: {},
  computed: {
  },
  data() {
    return {
      systemName:'灵活市场',
      checkFlag: true,
      showType: 2, // 2: 密码登录, 3: 注册
      formData: {
        userName: '', // 用户名或手机号
        name: '',     // 昵称 (新增)
        password: '',
        password2:''
      },
      isTick: true, // 协议勾选状态，根据您的截图，暂时移除，如果需要可以加回来
      showFlag:false
    }
  },
  onReady() {
  },
  onShow(){
    this.showFlag = true
  },
  methods: {
	  //刷新到首页
	  reloadHome(){
      setTimeout(function () {
        wx.reLaunch({
          url: '/pages/tb/home/home', // 请确认此路径是否正确
        })
      }, 500)
	  },
    //密码登录
    pwdLogin() {
      if (!app.globalData.Util.stringIsNotEmpty(this.formData.userName)) {
        uni.showToast({
          title: '请输入用户名或手机号',
          icon: 'none'
        })
        return
      }
      if (!app.globalData.Util.stringIsNotEmpty(this.formData.password)) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      // 确保已勾选协议
      if (!this.checkFlag) {
        uni.showToast({
          title: '请先阅读并同意用户协议和隐私政策',
          icon: 'none'
        });
        return;
      }

      app.globalData.Request.post(app.globalData.ApiConstant.User.login, {
        username: this.formData.userName,
        password: this.formData.password
      }).then(r => {
		  console.log("登录返回：", r)
        if (r.success) {
          //token
          uni.setStorageSync('token', r.token)
          //用户信息
          if (r.userInfo) {
            uni.setStorageSync('userInfo', r.userInfo)
          }
          uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 1000
          });
          //重新打开首页
          this.reloadHome()
        } else {
          uni.showToast({
            title: r.msg || r.message || '登录失败，请稍后再试',
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.showToast({
          title: '登录请求异常',
          icon: 'none'
        });
      }).finally(() => {
      });

    },
    // 注册
    register(){
      if (!app.globalData.Util.stringIsNotEmpty(this.formData.userName)) {
        uni.showToast({
          title: '请输入手机号码', // 注册时通常用手机号作为userName
          icon: 'none'
        })
        return
      }
      let phoneNumberPattern = /^1[3-9]\d{9}$/;
      let isValidPhoneNumber = phoneNumberPattern.test(this.formData.userName);
      if (!isValidPhoneNumber) {
        uni.showToast({
          title: '手机号码格式不正确',
          icon: 'none'
        })
        return
      }
      if (!app.globalData.Util.stringIsNotEmpty(this.formData.name)) { // 新增昵称校验
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return
      }
      if (!app.globalData.Util.stringIsNotEmpty(this.formData.password)) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      if (this.formData.password.length < 6) { // 简单密码长度校验
          uni.showToast({
              title: '密码长度至少为6位',
              icon: 'none'
          });
          return;
      }
      if (this.formData.password!==this.formData.password2) {
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none'
        })
        return
      }
      // 确保已勾选协议
      if (!this.checkFlag) {
        uni.showToast({
          title: '请先阅读并同意用户协议和隐私政策',
          icon: 'none'
        });
        return;
      }

      app.globalData.Request.post(app.globalData.ApiConstant.User.register, {
        username: this.formData.userName, // username 通常是手机号
        name: this.formData.name,         // name 是昵称
        password: this.formData.password
      }).then(r => {
        console.log("注册返回：",r)
        if (r.success) {
          uni.showToast({
            title: '注册成功',
            icon: 'success',
            duration: 1000
          });
          //token
          // 根据您的代码，注册成功后 r.result.token
          if (r.result && r.result.token) {
            uni.setStorageSync('token', r.result.token);
          } else if (r.token) { // 兼容直接返回 token 的情况
             uni.setStorageSync('token', r.token);
          }

          //用户信息
          // 根据您的代码，注册成功后 r.result.userInfo
          if (r.result && r.result.userInfo) {
            uni.setStorageSync('userInfo', r.result.userInfo);
          } else if (r.userInfo) { // 兼容直接返回 userInfo 的情况
            uni.setStorageSync('userInfo', r.userInfo);
          }
          //重新打开首页
          this.reloadHome()

        } else {
          uni.showToast({
            title: r.message || r.msg || '注册失败，请稍后再试', // 统一错误提示
            icon: 'none'
          })
        }
      }).catch(err => {
         uni.showToast({
            title: '注册请求异常',
            icon: 'none'
          })
      }).finally(() => {
      });
    },
    //显示密码输入框 (此方法在原代码中为空，暂时保留)
    showPwdInput() {
    },
    checkboxChange(e) { // 参数名改为 e
      this.checkFlag = e.detail.value.length > 0;
    },
    // 切换显示类型
    toggleShowType(type) {
      this.showType = type;
      // 清空一下表单数据，避免切换时残留
      this.formData.userName = '';
      this.formData.name = '';
      this.formData.password = '';
      this.formData.password2 = '';
    },

    gotoMianze() {
      uni.navigateTo({
        url: '/pages/tb/other/disclaimer' // 请确认此路径是否正确
      })
    },
    gotoXieyi() {
      uni.navigateTo({
        url: '/pages/tb/other/userAgreement' // 请确认此路径是否正确
      })

    },
  },
  onload() { // 注意：是 onLoad 不是 onload
  }
}
</script>

<template>
  <view class="page-container"> <!-- 新增一个根容器方便整体布局 -->
    <view class="header" style="border-top:3rpx solid #f6f6f6"></view>
    <view class="content" v-if="showFlag">
      <view class="textcenter">
        <view class="flex">
          <view class="title">
            {{ systemName }} <!-- 使用 data 中的 systemName -->
          </view>
        </view>
      </view>
      <view class="textcenter">
        <text class="low-title">
          {{ systemName }} <!-- 使用 data 中的 systemName -->
        </text>
      </view>

      <!--密码登录表单-->
      <view style="margin-top: 120rpx" class="form-wrapper" v-if="showType===2">
        <view class="forms">
          <view class="form-item">
            <view class="form-item-view form-input">
              <input class="uni-input" type="text"
                    v-model="formData.userName"
                    name="loginUserName"
                    placeholder="请输入用户名或手机号"/>
            </view>
          </view>
          <view class="form-item">
            <view class="form-item-view form-input">
              <input class="uni-input" type="password" password="true"
                    v-model="formData.password"
                    name="loginPassword"
                    placeholder="请输入密码"/>
            </view>
          </view>
          <view class="form-item action-area">
            <button class='login-but' :disabled="!checkFlag" :class="checkFlag?'':'login-but-disabled'"
                    @click="pwdLogin">
              登录
            </button>
            <view class="switch-link" @click="toggleShowType(3)">
              没有账号？立即注册
            </view>
          </view>
        </view>
      </view>

      <!--注册表单-->
      <view style="margin-top: 100rpx" class="form-wrapper" v-if="showType===3">
        <view class="forms">
          <view class="form-item">
            <view class="form-item-view form-input">
              <input class="uni-input" type="number" maxlength="11"
                    v-model="formData.userName"
                    name="registerPhone"
                    placeholder="请输入手机号"/>
            </view>
          </view>
           <view class="form-item"> <!-- 新增昵称输入 -->
            <view class="form-item-view form-input">
              <input class="uni-input" type="text"
                    v-model="formData.name"
                    name="registerName"
                    placeholder="请输入昵称"/>
            </view>
          </view>
          <view class="form-item">
            <view class="form-item-view form-input">
              <input class="uni-input" type="password" password="true"
                    v-model="formData.password"
                    name="registerPassword"
                    placeholder="请输入密码 (至少6位)"/>
            </view>
          </view>
          <view class="form-item">
            <view class="form-item-view form-input">
              <input class="uni-input" type="password" password="true"
                    v-model="formData.password2"
                    name="registerPassword2"
                    placeholder="请再次输入密码"/>
            </view>
          </view>
          <view class="form-item action-area">
            <button class='login-but' :disabled="!checkFlag" :class="checkFlag?'':'login-but-disabled'"
                    @click="register">
              注册
            </button>
            <view class="switch-link" @click="toggleShowType(2)">
              已有账号？立即登录
            </view>
          </view>
        </view>
      </view>

      <!-- 协议勾选区域 -->
      <!-- <view class="agreement-section">
        <checkbox-group @change="checkboxChange">
          <label class="agreement-label">
            <checkbox value="agree" :checked="checkFlag" color="#f96543" style="transform:scale(0.8)"/>
            <text>我已阅读并同意</text>
            <text class="link" @click.stop="gotoXieyi">《用户协议》</text>
            <text>和</text>
            <text class="link" @click.stop="gotoMianze">《隐私政策》</text>
          </label>
        </checkbox-group>
      </view> -->

    </view>
    <view class="footer-placeholder" v-else>
        <!-- 可以放一个加载动画或者骨架屏 -->
        <text>加载中...</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff; // 页面背景色
}
.header {
  // border-top:3rpx solid #f6f6f6; // 这个border-top可能不需要了，除非有特殊设计
}
.content {
  margin-top: 100rpx; // 调整整体上边距
  padding: 30rpx 50rpx; // 左右padding增大
  flex-grow: 1; // 让内容区域占据剩余空间
}

.container { // 这个类名在您的模板中没有用到，可以考虑移除
  height: 100%;
}

// .uni-form-item .title { // 这个类名在您的模板中没有用到
//   padding: 20rpx 0;
// }

/*表单 start*/
.form-wrapper { // 包裹整个表单区域
  width: 100%;
}
.forms {
  width: 100%;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx; // 统一表单项间距
  &:last-child {
    margin-bottom: 0;
  }
}

.form-item-label { // 这个类名在您的模板中没有用到
  width: 20%;
}

.form-item-view {
  width: 100%;
  min-height: 90rpx; // 稍微调高输入框高度
  display: flex; // 让 input 垂直居中
  align-items: center;
}

.form-input {
  border: 1rpx solid #e6e6e6;
  border-radius: 10rpx; // 输入框圆角
  padding: 0 25rpx; // 输入框内边距
  width: 100%;
  background-color: #fdfdfd;
}

.uni-input {
  border: none;
  font-size: 30rpx; // 输入文字大小
  width: 100%;
  height: 100%;
}

.textcenter {
  text-align: center;
  margin: 20rpx 0; // 调整标题区域间距
}

/*标题*/
.title {
  font-family: "Bookshelf Symbol 7", Arial, sans-serif; // 添加备用字体
  margin: 0 auto;
  font-size: 70rpx; // 调整标题大小
  font-weight: 600;
  color: #333; // 标题颜色
}

/*小标题*/
.low-title {
  font-size: 36rpx; // 调整小标题大小
  color: #555;
}

.action-area { // 包裹按钮和切换链接
  flex-direction: column;
  align-items: center;
  margin-top: 50rpx;
}

///登录/注册按钮
.login-but {
  color: white;
  width: 100%; // 按钮宽度占满
  height: 90rpx;
  line-height: 90rpx;
  background: #f96543; // 主题色
  border-radius: 45rpx; // 大圆角
  font-weight: 550;
  font-size: 32rpx;
  margin-bottom: 30rpx; // 按钮和下方链接的间距
  display: flex;
  align-items: center;
  justify-content: center;
  &::after { // 去除 uni-app button 默认边框
      border: none;
  }
}

.login-but-disabled {
  background: #fcc7ba; // 禁用时颜色变浅
  color: #fff;
}

.switch-link {
  font-size: 28rpx;
  color: #f96543; // 主题色
  text-align: center;
  padding: 10rpx;
}

/* 协议区域 */
.agreement-section {
  margin-top: 60rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  .agreement-label {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap; // 允许换行
      line-height: 1.5;
  }
  .link {
    color: #f96543; // 主题色
    margin: 0 4rpx;
  }
  checkbox {
      margin-right: 8rpx;
  }
}
.footer-placeholder {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}
</style>